.publish-page {
    display: grid;

    grid-template-columns: 1fr 5vw 2fr 5vw 1fr;
    grid-template-rows: 2fr max-content 1fr;
}
.publish-page > * {
    grid-column: 3 / 4;

    margin-top: 0;
    margin-bottom: 1rem;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .publish-page {
        grid-template-columns: minmax(0px, 2vw) 2fr minmax(0px, 2vw);
    }

    .publish-page > * {
        grid-column: 2 / 3;
    }
}


@media only screen and (min-device-width : 480px) and (max-device-width : 768px) {
    .publish-page {
        grid-template-columns: 1fr minmax(0px, 2vw) 5fr minmax(0px, 2vw) 1fr;
    }

}

@media only screen and (min-device-width : 768px) and (max-device-width : 1224px) {
    .publish-page {
        grid-template-columns: 1fr minmax(0px, 2vw) 4fr minmax(0px, 2vw) 1fr;
    }
}

@media only screen  and (min-width : 1224px) {
    .publish-page {
        grid-template-columns: 1fr minmax(0px, 2vw) 2fr minmax(0px, 2vw) 1fr;
    }
}
